<template>
  <div class="sop-table-wrap">
    <div class="card-head">
      <div class="search-rows">
        <el-button
          type="primary"
          size="small"
          @click="onNavigationTo('/market/sop/add-customer')"
          v-hasPermi="['userSOP:add']"
        >
          <i class="el-icon-plus"></i>
          新客户SOP
        </el-button>
        <el-select
          v-model="queryParams.lable"
          placeholder="企微标签"
          size="small"
        >
          <el-option
            v-for="item in taskList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select
          v-model="queryParams.lable"
          placeholder="智能标签"
          size="small"
        >
          <el-option
            v-for="item in taskList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input
          v-model="queryParams.name"
          class="x-input-select"
          size="small"
          placeholder="模版名称"
        >
          <el-button
            slot="append"
            size="small"
            icon="el-icon-search"
          ></el-button>
        </el-input>
      </div>
      <div class="flex-rows">
        <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
          <div slot="content">
            调用新客户模板创建自动触发规则<br />后，新加的客户满足条件会自动创建<br />指定SOP计划任务，支持加好友后直<br />接触发、按企微标签触发、按智能标<br />签触发。<br />送。
          </div>
          <span class="tolltip-text">新客户SOP是什么？</span>
        </el-tooltip>
        <div class="check-box">
          <el-checkbox v-model="checked" />
          <span>首次自动应用</span>
        </div>
        <el-tooltip
          class="item"
          effect="dark"
          placement="top"
          style="margin-right: 8px"
        >
          <div slot="content">
            开启后，首次登录本账号的企微号<br />，登录成功5分钟后会自动应用列表中的<br />所有配置。
          </div>
          <svg-icon icon-class="iquestion" />
        </el-tooltip>
        <el-button
          type="warning"
          size="mini"
          :disabled="multiple"
          @click="handleWechat"
          >应用配置</el-button
        >
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="80" align="center" />
      <el-table-column prop="id" label="规则ID" width="120"> </el-table-column>
      <el-table-column prop="date" label="触发方式">
        <template slot-scope="scope">
          <span>{{ scope.row.way }}</span>
          <el-tooltip placement="top" effect="light">
            <div slot="content">
              <div class="conditionitem p-8 mb-8">
                <div class="conheader c_text3 mb-12">客户符合以下条件</div>
                <div class="c_item w_full flex mb-8">
                  <div class="c_title c_text3">含任意企微标签：</div>
                  <div class="c_content flex flexwrap">
                    <div
                      v-for="item in 5"
                      :key="item"
                      class="c_tag f-12 mr-8 mb-8"
                    >
                      一般
                    </div>
                  </div>
                </div>
                <div class="c_item w_full flex mb-8">
                  <div class="c_title c_text3">含任意智能标签：</div>
                  <div class="c_content flex flexwrap">
                    <div
                      v-for="item in 5"
                      :key="item"
                      class="c_tag f-12 mr-8 mb-8"
                    >
                      孕4周
                    </div>
                  </div>
                </div>
              </div>
              <div class="conditionitem p-8 mb-8">
                <div class="conheader c_text3 mb-12">客户排除以下条件</div>
                <div class="c_item w_full flex mb-8">
                  <div class="c_title c_text3">含任意企微标签：</div>
                  <div class="c_content flex flexwrap">
                    <div
                      v-for="item in 5"
                      :key="item"
                      class="c_tag f-12 mr-8 mb-8"
                    >
                      一般
                    </div>
                  </div>
                </div>
                <div class="c_item w_full flex mb-8">
                  <div class="c_title c_text3">含任意智能标签：</div>
                  <div class="c_content flex flexwrap">
                    <div
                      v-for="item in 5"
                      :key="item"
                      class="c_tag f-12 mr-8 mb-8"
                    >
                      孕4周
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <span class="c_primary commhover pl-8">详情</span>
          </el-tooltip>
          <!--  -->
        </template>
      </el-table-column>
      <el-table-column prop="name" label="模板"> </el-table-column>
      <el-table-column prop="time" label="创建时间"> </el-table-column>
      <el-table-column prop="time" label="	最后操作时间"> </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="handleManage(scope.row)" type="text" size="small"
                     v-hasPermi="['userSOP:mgt']" >管理</el-button
          >
          <el-button @click="handleWechat(scope.row)" type="text" size="small"
                     v-hasPermi="['userSOP:app']" >应用</el-button
          >
          <el-button @click="handleEdit(scope.row)" type="text" size="small"
                     v-hasPermi="['userSOP:edit']">编辑</el-button
          >
          <el-button @click="handleDelete(scope.row)" type="text" size="small"
                     v-hasPermi="['userSOP:del']" >删除</el-button
          >
        </template>
      </el-table-column>
      <template slot="empty">
        <TableEmpty />
      </template>
    </el-table>
    <!-- 应用 -->
    <SelectWechat v-if="showWechat" :visableIf.sync="showWechat"></SelectWechat>
    <!-- 管理 -->
    <plan-manage v-if="showmanage" :visableIf.sync="showmanage" :row="rowitem" />
    <!-- 删除 -->
    <sop-delete-dialog v-if="showdelete" :visableIf.sync="showdelete" />
  </div>
</template>
<script>
import SelectWechat from "@/components/UserGroupComp/SelectWechat.vue";
import PlanManage from '@/views/communityOperation/components/PlanManage.vue';
import SopDeleteDialog from './SopDeleteDialog.vue';
export default {
  data() {
    return {
      taskList: [
        { value: "1", label: "创建中" },
        { value: "2", label: "下发中" },
        { value: "3", label: "下发完成" },
        { value: "6", label: "已取消" },
      ],
      accountList: [
        { value: "", label: "全部" },
        { value: "1", label: "员工1" },
        { value: "2", label: "员工2" },
        { value: "3", label: "员工3" },
      ],
      tableData: [
        {
          id: "1299174",
          way: "按标签触发",
          name: "222222",
          time: "2024-05-21 10:22",
        },
      ],
      queryParams: {
        label: "",
        name: "",
      },
      multipleSelection: [],
      showdelete: false,
      multiple: true,
      checked: false,
      showWechat: false,
      showmanage:false,
      rowitem:null
    };
  },
  components: {
    SelectWechat,
    PlanManage,
    SopDeleteDialog,
  },
  methods: {
    onNavigationTo(path) {
      this.$router.push(path);
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.multipleSelection = selection.map((item) => item.id);
      //   this.single = selection.length != 1;
      this.multiple = !selection.length;
    },

    handleDelete(row) {
      this.rowitem = row
      this.showdelete = true;
    },

    handleWechat(row) {
      this.rowitem = row
      this.showWechat = true;
    },

    handleManage(row){
      this.rowitem = row
      this.showmanage = true
    },

    handleEdit(row){
      this.$router.push({path:'/market/sop/edit-customer',query:{id:row.id}})
    }
  },
};
</script>
<style lang="scss" scoped>
.sop-table-wrap {
  background: #fff;
  width: 100%;

  .card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;

    .search-rows {
      display: grid;
      column-gap: 8px;
      grid-template-columns: 126px 200px 200px 200px;
    }

    .flex-rows {
      display: flex;
      align-items: center;
      .tolltip-text {
        color: #3070ff;
        font-size: 14px;
        line-height: 22px;
      }
      .check-box {
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        line-height: 22px;
        span {
          padding-right: 8px;
          padding-left: 8px;
        }
      }
    }
  }
}
.conditionitem {
  margin-bottom: 8px;
  border-radius: 2px;
  border: 1px solid #e9e9e9;
}
.conheader {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 5px 0;
}
.c_item {
  .c_title {
    width: 120px;
  }
  .c_content {
    width: calc(100% - 120px);
  }
  .c_tag {
    width: fit-content;
    padding: 1px 8px;
    background: #f0f0f0;
    border-radius: 2px;
    border: 1px solid #e9e9e9;
    color: rgba(0, 0, 0, 0.65);
    line-height: 20px;
  }
}
</style>
